ApgÅ«stiet React useMemo ÄÄ·i, lai optimizÄtu veiktspÄju, keÅ”ojot dÄrgus aprÄÄ·inus un novÄrÅ”ot nevajadzÄ«gas atkÄrtotas renderÄÅ”anas. Uzlabojiet savas React aplikÄcijas Ätrumu un efektivitÄti.
React useMemo: VeiktspÄjas optimizÄcija ar memoizÄciju
React izstrÄdes pasaulÄ veiktspÄja ir vissvarÄ«gÄkÄ. AplikÄcijÄm kļūstot arvien sarežģītÄkÄm, ir Ä«paÅ”i svarÄ«gi nodroÅ”inÄt vienmÄrÄ«gu un atsaucÄ«gu lietotÄja pieredzi. Viens no jaudÄ«gÄkajiem rÄ«kiem React arsenÄlÄ veiktspÄjas optimizÄcijai ir useMemo ÄÄ·is. Å is ÄÄ·is ļauj jums memoizÄt jeb keÅ”ot dÄrgu aprÄÄ·inu rezultÄtu, novÄrÅ”ot nevajadzÄ«gas atkÄrtotas kalkulÄcijas un uzlabojot jÅ«su aplikÄcijas efektivitÄti.
Izpratne par memoizÄciju
BÅ«tÄ«bÄ memoizÄcija ir tehnika, ko izmanto, lai optimizÄtu funkcijas, saglabÄjot dÄrgu funkciju izsaukumu rezultÄtus un atgriežot keÅ”oto rezultÄtu, kad atkal tiek izmantoti tie paÅ”i ievaddati. TÄ vietÄ, lai atkÄrtoti veiktu aprÄÄ·inu, funkcija vienkÄrÅ”i izgÅ«st iepriekÅ” aprÄÄ·inÄto vÄrtÄ«bu. Tas var ievÄrojami samazinÄt laiku un resursus, kas nepiecieÅ”ami funkcijas izpildei, Ä«paÅ”i strÄdÄjot ar sarežģītiem aprÄÄ·iniem vai lielÄm datu kopÄm.
IedomÄjieties, ka jums ir funkcija, kas aprÄÄ·ina skaitļa faktoriÄlu. Liela skaitļa faktoriÄla aprÄÄ·inÄÅ”ana var bÅ«t skaitļoÅ”anas ziÅÄ intensÄ«va. MemoizÄcija var palÄ«dzÄt, saglabÄjot katra jau aprÄÄ·inÄtÄ skaitļa faktoriÄlu. NÄkamreiz, kad funkcija tiek izsaukta ar to paÅ”u skaitli, tÄ var vienkÄrÅ”i izgÅ«t saglabÄto rezultÄtu, nevis to pÄrrÄÄ·inÄt.
IepazÄ«stinÄm ar React useMemo
useMemo ÄÄ·is React nodroÅ”ina veidu, kÄ memoizÄt vÄrtÄ«bas funkcionÄlajos komponentos. Tas pieÅem divus argumentus:
- Funkciju, kas veic aprÄÄ·inu.
- Atkarību masīvu.
useMemo ÄÄ·is atkÄrtoti izpildÄ«s funkciju tikai tad, ja mainÄ«sies kÄda no masÄ«vÄ esoÅ”ajÄm atkarÄ«bÄm. Ja atkarÄ«bas paliek nemainÄ«gas, tas atgriezÄ«s keÅ”oto vÄrtÄ«bu no iepriekÅ”ÄjÄs renderÄÅ”anas. Tas novÄrÅ” nevajadzÄ«gu funkcijas izpildi, kas var ievÄrojami uzlabot veiktspÄju, Ä«paÅ”i strÄdÄjot ar dÄrgiem aprÄÄ·iniem.
useMemo sintakse
useMemo sintakse ir vienkÄrÅ”a:
const memoizedValue = useMemo(() => {
// Å eit notiek dÄrgs aprÄÄ·ins
return computeExpensiveValue(a, b);
}, [a, b]);
Å ajÄ piemÄrÄ computeExpensiveValue(a, b) ir funkcija, kas veic dÄrgo aprÄÄ·inu. MasÄ«vs [a, b] norÄda atkarÄ«bas. useMemo ÄÄ·is atkÄrtoti izpildÄ«s computeExpensiveValue funkciju tikai tad, ja mainÄ«sies a vai b. PretÄjÄ gadÄ«jumÄ tas atgriezÄ«s keÅ”oto vÄrtÄ«bu no iepriekÅ”ÄjÄs renderÄÅ”anas.
Kad lietot useMemo
useMemo ir visnoderÄ«gÄkais Å”Ädos scenÄrijos:
- DÄrgi aprÄÄ·ini: Ja jums ir funkcija, kas veic skaitļoÅ”anas ziÅÄ intensÄ«vu uzdevumu, piemÄram, sarežģītas datu transformÄcijas vai lielu datu kopu filtrÄÅ”anu.
- Atsauces vienlÄ«dzÄ«bas pÄrbaudes: Ja jums jÄnodroÅ”ina, ka vÄrtÄ«ba mainÄs tikai tad, kad mainÄs tÄs pamatÄ esoÅ”Äs atkarÄ«bas, Ä«paÅ”i nododot vÄrtÄ«bas kÄ props bÄrnu komponentiem, kas izmanto
React.memo. - NevajadzÄ«gu atkÄrtotu renderÄÅ”anu novÄrÅ”ana: Ja vÄlaties novÄrst komponenta atkÄrtotu renderÄÅ”anu, ja tÄ props vai stÄvoklis faktiski nav mainÄ«jies.
IedziļinÄsimies katrÄ no Å”iem scenÄrijiem ar praktiskiem piemÄriem.
1. scenÄrijs: DÄrgi aprÄÄ·ini
Apsveriet scenÄriju, kurÄ jums ir jÄfiltrÄ liels lietotÄju datu masÄ«vs, pamatojoties uz noteiktiem kritÄrijiem. Liela masÄ«va filtrÄÅ”ana var bÅ«t skaitļoÅ”anas ziÅÄ dÄrga, Ä«paÅ”i, ja filtrÄÅ”anas loÄ£ika ir sarežģīta.
const UserList = ({ users, filter }) => {
const filteredUsers = useMemo(() => {
console.log('FiltrÄju lietotÄjus...'); // ImitÄ dÄrgu aprÄÄ·inu
return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
}, [users, filter]);
return (
{filteredUsers.map(user => (
- {user.name}
))}
);
};
Å ajÄ piemÄrÄ mainÄ«gais filteredUsers tiek memoizÄts, izmantojot useMemo. FiltrÄÅ”anas loÄ£ika tiek atkÄrtoti izpildÄ«ta tikai tad, ja mainÄs users masÄ«vs vai filter vÄrtÄ«ba. Ja users masÄ«vs un filter vÄrtÄ«ba paliek nemainÄ«gi, useMemo ÄÄ·is atgriezÄ«s keÅ”oto filteredUsers masÄ«vu, novÄrÅ”ot nevajadzÄ«gu filtrÄÅ”anas loÄ£ikas atkÄrtotu izpildi.
2. scenÄrijs: Atsauces vienlÄ«dzÄ«bas pÄrbaudes
Nododot vÄrtÄ«bas kÄ props bÄrnu komponentiem, kas izmanto React.memo, ir svarÄ«gi nodroÅ”inÄt, ka props mainÄs tikai tad, kad mainÄs to pamatÄ esoÅ”Äs atkarÄ«bas. PretÄjÄ gadÄ«jumÄ bÄrna komponents var tikt nevajadzÄ«gi pÄrrenderÄts, pat ja dati, ko tas attÄlo, nav mainÄ«juÅ”ies.
const MyComponent = React.memo(({ data }) => {
console.log('MyComponent pÄrrenderÄts!');
return {data.value};
});
const ParentComponent = () => {
const [a, setA] = React.useState(1);
const [b, setB] = React.useState(2);
const data = useMemo(() => ({
value: a + b,
}), [a, b]);
return (
Å ajÄ piemÄrÄ objekts data tiek memoizÄts, izmantojot useMemo. Komponents MyComponent, kas ir ietÄ«ts ar React.memo, tiks pÄrrenderÄts tikai tad, kad mainÄ«sies data props. TÄ kÄ data ir memoizÄts, tas mainÄ«sies tikai tad, ja mainÄ«sies a vai b. Bez useMemo jauns data objekts tiktu izveidots katrÄ ParentComponent renderÄÅ”anas reizÄ, izraisot MyComponent nevajadzÄ«gu pÄrrenderÄÅ”anu, pat ja a + b vÄrtÄ«ba paliktu tÄda pati.
3. scenÄrijs: NevajadzÄ«gu atkÄrtotu renderÄÅ”anu novÄrÅ”ana
Dažreiz jÅ«s varat vÄlÄties novÄrst komponenta atkÄrtotu renderÄÅ”anu, ja tÄ props vai stÄvoklis faktiski nav mainÄ«jies. Tas var bÅ«t Ä«paÅ”i noderÄ«gi, lai optimizÄtu sarežģītu komponentu veiktspÄju, kuriem ir daudz bÄrnu komponentu.
const MyComponent = ({ config }) => {
const processedConfig = useMemo(() => {
// ApstrÄdÄ config objektu (dÄrga operÄcija)
console.log('ApstrÄdÄju config...');
let result = {...config}; // VienkÄrÅ”s piemÄrs, bet varÄtu bÅ«t sarežģīts
if (result.theme === 'dark') {
result.textColor = 'white';
} else {
result.textColor = 'black';
}
return result;
}, [config]);
return (
{processedConfig.title}
{processedConfig.description}
);
};
const App = () => {
const [theme, setTheme] = React.useState('light');
const config = useMemo(() => ({
title: 'My App',
description: 'This is a sample app.',
theme: theme
}), [theme]);
return (
Å ajÄ piemÄrÄ objekts processedConfig tiek memoizÄts, pamatojoties uz config props. DÄrgÄ konfigurÄcijas apstrÄdes loÄ£ika tiek izpildÄ«ta tikai tad, kad pats config objekts mainÄs (t.i., kad mainÄs tÄma). SvarÄ«gi ir tas, ka, lai gan config objekts tiek definÄts no jauna App komponentÄ katru reizi, kad App tiek pÄrrenderÄts, useMemo izmantoÅ”ana nodroÅ”ina, ka config objekts faktiski *mainÄ«sies* tikai tad, kad mainÄ«sies pats mainÄ«gais theme. Bez useMemo ÄÄ·a App komponentÄ jauns config objekts tiktu izveidots katrÄ App renderÄÅ”anas reizÄ, liekot MyComponent katru reizi pÄrrÄÄ·inÄt processedConfig, pat ja pamatÄ esoÅ”ie dati (tÄma) faktiski bÅ«tu tie paÅ”i.
BiežÄkÄs kļūdas, no kurÄm jÄizvairÄs
Lai gan useMemo ir jaudÄ«gs rÄ«ks, ir svarÄ«gi to lietot apdomÄ«gi. PÄrmÄrÄ«ga useMemo izmantoÅ”ana var pat pasliktinÄt veiktspÄju, ja memoizÄto vÄrtÄ«bu pÄrvaldÄ«bas izmaksas pÄrsniedz ieguvumus no atkÄrtotu aprÄÄ·inu novÄrÅ”anas.
- PÄrmÄrÄ«ga memoizÄcija: NememoizÄjiet visu! MemoizÄjiet tikai tÄs vÄrtÄ«bas, kuras ir patieÅ”Äm dÄrgi aprÄÄ·inÄt vai kuras tiek izmantotas atsauces vienlÄ«dzÄ«bas pÄrbaudÄs.
- Nepareizas atkarÄ«bas: PÄrliecinieties, ka atkarÄ«bu masÄ«vÄ ir iekļautas visas atkarÄ«bas, no kurÄm funkcija ir atkarÄ«ga. PretÄjÄ gadÄ«jumÄ memoizÄtÄ vÄrtÄ«ba var kļūt novecojusi un izraisÄ«t neparedzÄtu uzvedÄ«bu.
- Aizmirstas atkarÄ«bas: Aizmirstot kÄdu atkarÄ«bu, var rasties smalkas kļūdas, kuras ir grÅ«ti atrast. VienmÄr pÄrbaudiet savus atkarÄ«bu masÄ«vus, lai pÄrliecinÄtos, ka tie ir pilnÄ«gi.
- PriekÅ”laicÄ«ga optimizÄcija: NeoptimizÄjiet priekÅ”laicÄ«gi. OptimizÄjiet tikai tad, kad esat identificÄjis veiktspÄjas problÄmu. Izmantojiet profilÄÅ”anas rÄ«kus, lai identificÄtu tÄs koda daļas, kas patieÅ”Äm rada veiktspÄjas problÄmas.
Alternatīvas useMemo
Lai gan useMemo ir jaudÄ«gs rÄ«ks vÄrtÄ«bu memoizÄÅ”anai, ir arÄ« citas metodes, ko varat izmantot, lai optimizÄtu veiktspÄju React aplikÄcijÄs.
- React.memo:
React.memoir augstÄkas kÄrtas komponents, kas memoizÄ funkcionÄlu komponentu. Tas novÄrÅ” komponenta atkÄrtotu renderÄÅ”anu, ja tÄ props nav mainÄ«juÅ”ies. Tas ir noderÄ«gi, lai optimizÄtu to komponentu veiktspÄju, kas atkÄrtoti saÅem tos paÅ”us props. - PureComponent (klases komponentiem): LÄ«dzÄ«gi kÄ
React.memo,PureComponentveic seklu props un stÄvokļa salÄ«dzinÄÅ”anu, lai noteiktu, vai komponents ir jÄpÄrrenderÄ. - Koda sadalÄ«Å”ana (Code Splitting): Koda sadalÄ«Å”ana ļauj sadalÄ«t jÅ«su aplikÄciju mazÄkos paketos, kurus var ielÄdÄt pÄc pieprasÄ«juma. Tas var uzlabot jÅ«su aplikÄcijas sÄkotnÄjo ielÄdes laiku un samazinÄt koda apjomu, kas ir jÄparsÄ un jÄizpilda.
- Debouncing un Throttling: Debouncing un throttling ir tehnikas, ko izmanto, lai ierobežotu funkcijas izpildes biežumu. Tas var bÅ«t noderÄ«gi, lai optimizÄtu notikumu apstrÄdÄtÄju veiktspÄju, kas tiek aktivizÄti bieži, piemÄram, ritinÄÅ”anas vai loga izmÄru maiÅas apstrÄdÄtÄji.
Praktiski piemÄri no visas pasaules
ApskatÄ«sim dažus piemÄrus, kÄ useMemo var tikt pielietots dažÄdos kontekstos visÄ pasaulÄ:
- E-komercija (globÄli): GlobÄla e-komercijas platforma varÄtu izmantot
useMemo, lai keÅ”otu sarežģītu produktu filtrÄÅ”anas un kÄrtoÅ”anas operÄciju rezultÄtus, nodroÅ”inot Ätru un atsaucÄ«gu iepirkÅ”anÄs pieredzi lietotÄjiem visÄ pasaulÄ, neatkarÄ«gi no viÅu atraÅ”anÄs vietas vai interneta savienojuma Ätruma. PiemÄram, lietotÄjs TokijÄ, kurÅ” filtrÄ produktus pÄc cenu diapazona un pieejamÄ«bas, gÅ«tu labumu no memoizÄtas filtrÄÅ”anas funkcijas. - FinanÅ”u informÄcijas panelis (starptautisks): FinanÅ”u informÄcijas panelis, kas attÄlo reÄllaika akciju cenas un tirgus datus, varÄtu izmantot
useMemo, lai keÅ”otu aprÄÄ·inu rezultÄtus, kas saistÄ«ti ar finanÅ”u rÄdÄ«tÄjiem, piemÄram, slÄ«doÅ”ajiem vidÄjiem rÄdÄ«tÄjiem vai svÄrstÄ«guma mÄriem. Tas novÄrstu paneļa lÄndarbÄ«bu, attÄlojot lielu datu apjomu. TirgotÄjs LondonÄ, kas uzrauga akciju veiktspÄju, redzÄtu plÅ«denÄkus atjauninÄjumus. - KartÄÅ”anas aplikÄcija (reÄ£ionÄla): KartÄÅ”anas aplikÄcija, kas attÄlo Ä£eogrÄfiskos datus, varÄtu izmantot
useMemo, lai keÅ”otu aprÄÄ·inu rezultÄtus, kas saistÄ«ti ar karÅ”u projekcijÄm un koordinÄtu transformÄcijÄm. Tas uzlabotu aplikÄcijas veiktspÄju, tuvinot un pÄrvietojot karti, Ä«paÅ”i strÄdÄjot ar lielÄm datu kopÄm vai sarežģītiem karÅ”u stiliem. LietotÄjs, kurÅ” pÄta detalizÄtu Amazones lietus mežu karti, piedzÄ«votu ÄtrÄku renderÄÅ”anu. - Valodu tulkoÅ”anas lietotne (daudzvalodu): IedomÄjieties valodu tulkoÅ”anas lietotni, kurai ir jÄapstrÄdÄ un jÄattÄlo lieli tulkotÄ teksta gabali.
useMemovarÄtu izmantot, lai memoizÄtu teksta formatÄÅ”anu un renderÄÅ”anu, nodroÅ”inot vienmÄrÄ«gu lietotÄja pieredzi neatkarÄ«gi no attÄlotÄs valodas. Tas ir Ä«paÅ”i svarÄ«gi valodÄm ar sarežģītÄm rakstzÄ«mju kopÄm, piemÄram, Ä·Ä«nieÅ”u vai arÄbu valodai.
SecinÄjums
useMemo ÄÄ·is ir vÄrtÄ«gs rÄ«ks React aplikÄciju veiktspÄjas optimizÄcijai. MemoizÄjot dÄrgus aprÄÄ·inus un novÄrÅ”ot nevajadzÄ«gas atkÄrtotas renderÄÅ”anas, jÅ«s varat ievÄrojami uzlabot sava koda Ätrumu un efektivitÄti. TomÄr ir svarÄ«gi lietot useMemo apdomÄ«gi un izprast tÄ ierobežojumus. PÄrmÄrÄ«ga useMemo izmantoÅ”ana var pat pasliktinÄt veiktspÄju, tÄpÄc ir svarÄ«gi identificÄt tÄs koda daļas, kas patieÅ”Äm rada veiktspÄjas problÄmas, un koncentrÄt savus optimizÄcijas centienus uz Ŕīm jomÄm.
Izprotot memoizÄcijas principus un to, kÄ efektÄ«vi izmantot useMemo ÄÄ·i, jÅ«s varat veidot augstas veiktspÄjas React aplikÄcijas, kas nodroÅ”ina vienmÄrÄ«gu un atsaucÄ«gu lietotÄja pieredzi lietotÄjiem visÄ pasaulÄ. Atcerieties profilÄt savu kodu, identificÄt vÄjÄs vietas un stratÄÄ£iski pielietot useMemo, lai sasniegtu labÄkos rezultÄtus.